<template>
  <content-wrapper>
    <div class="box box-solid">
      <div class="box-body table-responsive no-padding">
        <div class="mailbox-controls">
          <div class="btn-group">
            <bs-button icon="fa fa-refresh" size="sm" :loading="loading" @click="loadDataList"/>
          </div>
          <bs-pagination :data="data" v-model="page" class="pull-right"/>
        </div>
        <table class="table table-hover">
          <thead class="with-border">
          <tr>
            <th width="220">模块</th>
            <th width="150">操作</th>
            <th>操作人</th>
            <th>IP</th>
            <th>执行时间</th>
            <th>异常信息</th>
          </tr>
          </thead>
          <tbody>
          <tr v-if="data.list.length == 0">
            <td colspan="20">暂无数据</td>
          </tr>
          <tr v-else v-for="item in data.list" :key="item.id">
            <td nowrap>{{item.module}}</td>
            <td>{{item.action}}</td>
            <td nowrap>{{item.user?item.user.userName:''}}</td>
            <td>{{item.ip}}</td>
            <td>{{item.createDate|dateFormat}}</td>
            <td>{{item.exception}}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="box-footer">
        <bs-pagination :data="data" v-model="page" class="pull-right"/>
      </div>
    </div>
  </content-wrapper>
</template>

<script>
  export default {
    name: 'SystemLog',
    data() {
      return {
        data: {list: []},
        loading: false,
        page: 1
      };
    },
    mounted() {
      this.loadDataList();
    },
    methods: {
      loadDataList() {
        this.$api('system.log.list').invoke({page: this.page}).then(({data}) => {
          this.data = data;
          window.scrollTo(0, 0);
        });
      }
    },
    watch: {
      page() {
        this.loadDataList();
      }
    }
  };
</script>
